<template>
	<div>
		<div class="search_input">
			<el-input v-model="inputNationFlag" style="width: 200px;margin-left: auto" placeholder="请输入民族"
				suffix-icon="el-icon-search" class="ml-5"></el-input>
			<el-input v-model="inputNationTranslation" style="width: 200px;margin-left: 2px" placeholder="请输入普通话含义"
				suffix-icon="el-icon-search" class="ml-5"></el-input>
			<el-button style="margin-left: 5px" type="primary" @click="handleSearch()">搜索<i class="el-icon-search" />
			</el-button>
			<el-button style="margin-left: 20px" type="warning" @click="rest()">重置</el-button>
		</div>
		<dic class="upload_btn">
			<el-button style="margin-left: auto" type="danger" @click="dialogVisible = true">上传</el-button>
		</dic>

		<div>
			<el-table :data="tableData" border style="width: 100%">
				<el-table-column type="index" label="ID" align="center" width="40">
				</el-table-column>
				<el-table-column prop="nationFlag" label="民族" align="center" width="180">
				</el-table-column>
				<el-table-column prop="nationVoiceurl" label="语音包地址" align="center">
				</el-table-column>
				<el-table-column prop="nationTranslation" label="普通话含义" align="center">
				</el-table-column>
				<el-table-column fixed="right" label="操作" align="center" width="160">
					<template slot-scope="scope">
						<el-button @click="handleClick(scope.row)" type="primary" size="small">修改</el-button>
						<el-button @click="handleDelete(scope.row)" type="danger" size="small">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<!--    分页条-->
		<div>
			<el-pagination background layout="total, sizes, prev, pager, next, jumper"
				:current-page="pagination.currentPage" :page-sizes="[10, 15, 20, 25]" :page-size="pagination.pageSize"
				:total="pagination.total">
			</el-pagination>
		</div>

		<!--    弹出框-->
		<el-dialog title="请输入内容" :visible.sync="dialogVisible" width="25%" :before-close="handleClose">
			<el-form :label-position="labelPosition" label-width="100px">
				<el-form-item label="民族:">
					<el-input v-model="nationFlag" placeholder="请输入民族">
					</el-input>
				</el-form-item>
				<el-form-item label="语音包">
					<input type="file" @change="uploadNationFile" multiple />
				</el-form-item>
				<el-form-item label="普通话含义">
					<el-input v-model="nationTranslation" placeholder="请输入普通话含义"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="handleSubmit">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import axios from "axios";
	import ElementUI from 'element-ui'
	export default {
		name: "nationFile",
		data() {
			return {
				//民族
				nationFlag: '',
				//搜索框
				inputNationFlag:'',
				nationTranslation: '',
				inputNationTranslation:'',
				//数据列表
				tableData: [],
				//语音包
				multipartNationFile: null,
				//是否展示对话框(默认为不展开)
				dialogVisible: false,
				//文件列表
				modeList: [],
				mode: {},
				pagination: {
					currentPage: 1, //当前页码值
					pageSize: [10], //每页显示的条数
					total: 0, //总页数
				},
				nationForm: [],
				labelPosition: [],
				formLabelAlign: '',
			}
		},
		created() {
			this.realGetAll()
		},
		methods: {
			//监听
			uploadNationFile(event) {
				this.multipartNationFile = event.target.files[0]
			},
			getAll() {
				this.request.get("/wx/nation/nationList", {
					params: {
						nationFlag: this.nationFlag
					}
				}).then((res) => {
					this.pagination.pageSize = res.size
					this.pagination.currentPage = res.current
					this.pagination.total = res.total
					this.tableData = res
				})
			},
			realGetAll() {
				this.request.get("/wx/nation/getAll").then((res) => {
					this.pagination.pageSize = res.size
					this.pagination.currentPage = res.current
					this.pagination.total = res.total
					this.tableData = res
				})
			},
			handleSearch() {
				this.request.get("/wx/nation/nationQuery", {
					params: {
						keyword: this.inputNationTranslation,
						nationFlag: this.inputNationFlag,
					}
				}).then((res) => {
					this.tableData = res
				})
			},
			rest() {
				this.inputNationFlag = ''
				this.inputNationTranslation = ''
				this.realGetAll()
			},
			handleClick() {
				this.dialogVisible = true
			},

			handleSubmit() {
				var that = this
				if (this.nationFlag != null && this.nationTranslation != null && this.multipartNationFile != null) {
					axios({
						method: "POST",
						url: 'http://localhost:8089/wx/admin/uploadNation',
						headers: {
							"Content-Type": "multipart/form-data"
						},
						data: {
							nationFlag: this.nationFlag,
							nationTranslation: this.nationTranslation,
							multipartFile: this.multipartNationFile
						}
					}).then(res => {
						ElementUI.Message({
							message: "上传成功！",
							type: 'success'
						})
						this.dialogVisible = false
						//刷新页面
						this.realGetAll()
					})
				} else {
					this.dialogVisible = true
					ElementUI.Message({
						message: "表单不可为空！",
						type: 'error'
					})
				}
			},

			handleDelete() {
				this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$message({
						type: 'success',
						message: '删除成功!'
					});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
		}
	}
</script>

<style scoped>
	.search_input {
		text-align: left;
		margin-bottom: 5px;
	}

	.upload_btn {
		float: left;
		text-align: left;
		margin-bottom: 5px;
	}
</style>